<template>
    <div id="system-info" class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl w-full">
      <h2 class="text-xl font-semibold text-blue-700 mb-4 flex items-center">
        <i class="fas fa-info-circle mr-2"></i> 系统信息
      </h2>
      
      <div v-if="loading" class="flex justify-center py-8">
        <i class="fas fa-spinner fa-spin text-blue-500 text-2xl"></i>
      </div>
      
      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-blue-50 rounded-xl p-5">
          <h3 class="font-medium text-blue-800 mb-3">应用信息</h3>
          <div class="space-y-2">
            <InfoRow label="开发模式" :value="info.dev_mode ? '是' : '否'" />
            <InfoRow label="API基础URL" :value="apiBaseUrl" />
            <InfoRow label="环境" :value="envMode" />
          </div>
        </div>
        
        <div class="bg-indigo-50 rounded-xl p-5">
          <h3 class="font-medium text-indigo-800 mb-3">系统信息</h3>
          <div class="space-y-2">
            <InfoRow label="平台" :value="info.platform" />
            <InfoRow label="Python版本" :value="info.python_version" />
            <InfoRow label="前端框架" value="Vue 3.3.4" />
          </div>
        </div>
      </div>
      
      <div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-lg">
        <i class="fas fa-exclamation-triangle mr-2"></i> 无法获取系统信息: {{ error }}
      </div>
    </div>
  </template>
  
  <script setup>
  import InfoRow from './InfoRow.vue'
  import  { systemInfo } from '@/api/modules/system'
  import { getBaseURL } from '@/api/core/request';
  import { ref, computed, onMounted } from 'vue'
  
  const info = ref({
    platform: '',
    python_version: '',
    dev_mode: '0'
  })
  const loading = ref(true)
  const error = ref(null)
  const apiBaseUrl = ref(getBaseURL())
  
  const envMode = computed(() => import.meta.env.MODE)
  
  onMounted(async () => {
    try {
      const data = await systemInfo()
      console.info('获取系统信息:', data)
      info.value = data // 直接使用返回的data
    } catch (err) {
      error.value = err.message || '获取系统信息失败'
      console.error('获取系统信息失败:', err)
    } finally {
      loading.value = false
    }
  })
  </script>